<template>
  <div
    :id="'mapForDrag' + mapIndex"
    class="map-box-for-video"
    :class="{ 'start-look-here': lookHere }"
    @mousemove="mousemove"
  >
    <div class="drag" v-drag-width></div>
    <div
      class="l-btns"
      :class="{
        small: MapWindowWidth <= 238 && MapWindowWidth > 169,
        mini: MapWindowWidth <= 169,
      }"
    >
      <i
        class="iconfont btn"
        :class="
          lookHere
            ? 'icon-shipinzujian_kanzheli_s on'
            : 'icon-shipinzujian_kanzheli_n'
        "
        c-tip="看这里"
        c-tip-placement="right"
        @click="doLookHere"
      />
      <i
        class="iconfont icon-shexiangjidingwei btn"
        c-tip="定位到摄像机"
        c-tip-placement="right"
        @click="locateToCamera"
      />
    </div>
    <i
      v-if="lookHere"
      class="look-here-mouse iconfont icon-zhongxindian1"
      :style="{ left: mouse.x + 'px', top: mouse.y + 'px' }"
    />

    <!--    窗口小于205显示不开, 做隐藏处理-->
    <div class="slider" v-show="MapWindowWidth >= 205">
      <el-slider
        v-model="distance"
        ref="slider"
        :min="min"
        :max="max"
        :step="step"
        :format-tooltip="formatTooltip"
        tooltip-class="slider_tip_video_map"
        @change="distanceChange"
        class="customizedSlider"
      >
      </el-slider>
      <div class="slider-text">
        <span>0km</span>
        <span>{{ max / 2 }}km</span>
        <span>{{ max }}km</span>
      </div>
    </div>
    <div class="map-mask-bottom"></div>

    <div
      :id="'mapForVideoBox' + mapIndex"
      class="map-content"
      ondragstart="return false"
    />

    <div v-if="isShowRealTimeShout">
      <realTimeShout
        class="dialogBox realTimeShoutBox"
        :left="innerWidth * 0.5 - 180"
        :top="271"
        :detailData="detailsDataShout"
        ref="realTimeShout"
        @close="closeRealTimeShout"
      ></realTimeShout>
    </div>

    <Ts ref="ts" class="ts" />
  </div>
</template>

<script>
import {
  clusterSetViewshed,
  initCTMap,
  setClusterLayerData,
  setZoomAndCenter,
  showMarkCluster,
} from "@/utils/openLayerCommon";
import { queryDeviceForWE } from "@/api/alarmEvent/mapHome.js";
import { getDeviceVisibleBySite, queryHornByRange } from "@/api/video/index.js";
import "@ct/ct_map_ol/index.css";

import arOnline_g from "@/assets/image/ar/ar-online-g.png";
import arOnline from "@/assets/image/ar/ar-online.png";
import arOffline_g from "@/assets/image/ar/ar-outline-g.png";
import arOffline from "@/assets/image/ar/ar-outline.png";
import ipcOnline_g from "@/assets/image/ar/ipc-online-g.png";
import ipcOnline from "@/assets/image/ar/ipc-online.png";
import ipcOffline_g from "@/assets/image/ar/ipc-outline-g.png";
import ipcOffline from "@/assets/image/ar/ipc-outline.png";
import hornOnline from "@/assets/image/functionMenu/horn_icon_2.png"; //大喇叭 在线
import hornOffline from "@/assets/image/functionMenu/horn_icon_4.png"; //大喇叭 离线
import hornClick from "@/assets/image/functionMenu/horn_icon_3.png"; //大喇叭 选中
import Ts from "@/components/canvas/ts.vue";
import CommonMap from "@/utils/CommonMap";
import realTimeShout from "@/views/pages/video/realTimeShout.vue";
import EventBus from "@/components/EventBus";
import CTMapOl from "@ct/ct_map_ol";
import { turnToPtzByPointAngle } from "@/api/video/video";
import clusterBlue from "@/assets/image/cluster-blue-ar.png";
import position from "@/assets/image/position-one.png";
let draw = null;
// 可视域轮询
let visibleInterval = null;
export default {
  name: "mapForVideo",
  components: { realTimeShout, Ts },
  props: {
    longitude: {
      //经度
      type: [String, Number],
    },
    latitude: {
      //纬度
      type: [String, Number],
    },
    deviceCode: {
      type: [String, Number],
      required: true,
    },
    channelCode: {
      type: [String, Number],
      required: true,
    },
    // 分屏传入this
    vueIns: {
      type: Object,
      default: () => {
        return {};
      },
    },
    scale: {
      //transform 缩放
      type: [String, Number],
      default: 1,
    },
  },
  data() {
    return {
      mapIndex: this.UUID(),
      MapWindowWidth: 0,
      // 是否打开可视域
      isOpenViewshed: true,
      // 地图类型 wx 卫星
      mapType: "satellite",
      industryType: "", //行业编码
      viewDistanceColor: "rgba(58, 160, 255, 0.3)", // 可视域颜色
      viewAngleColor: "rgba(58, 160, 255, 0.7)", // 可视域角度颜色
      deviceIcon: null,
      isArCamera: false,
      that: this,
      flag: true,
      LayeredClusterViewShed: null,
      mapRef: null,
      globalMap: null,
      abbreviation: "yjjbnt", // 地图类型
      distance: 3, // 距离值
      min: 0, // 距离最小值
      max: 10, // 距离最大值
      step: 0.1, // 距离步长
      hornMass: null,
      currentSelectRealTimeShout: "", // 当前选中的实时喊话数据
      detailsDataShout: {}, // 详情数据
      isShowRealTimeShout: false,
      innerWidth: window.innerWidth,
      lookHere: false, //看这里
      lookHereLayer: false, //看这里图层
      mouse: {
        //鼠标位置
        x: 0,
        y: 0,
      },
      showClusterFlag: false,
      hornList: [],
    };
  },
  watch: {},
  computed: {
    userId() {
      return this.$store.getters.userInfo.userId;
    },
    isTenant() {
      return Object.keys(this.vueIns).length === 0
        ? this.$store.getters.userInfo.tenantId
        : this.vueIns.$store.getters.userInfo.tenantId;
    },
  },
  created() {
    if (Object.keys(this.vueIns).length) {
      this.$store = this.vueIns.$store;
    }
  },
  mounted() {
    const _this = this;
    this.industryType = this.$store.getters.industry.split(" ");
    if (this.industryType.includes("g")) {
      this.viewDistanceColor = "rgba(255, 245, 54, 0.2)"; //可视域颜色
      this.viewAngleColor = "rgba(255, 245, 54, 0.7)"; //可视域角度颜色
    }
    this.queryDeviceData();

    //监听组件窗口宽度变化
    const $el = this.$el;
    this.resizeObserver = new ResizeObserver(() => {
      _this.MapWindowWidth = $el.offsetWidth; //窗口宽度
      _this.innerWidth = window.innerWidth; // 更新innerWidth值
      this.$emit("resize", $el.offsetHeight + "px");
    });
    this.resizeObserver.observe($el);

    // 当鼠标移出滑块按钮后再松开，tooltip无法关闭，手动关闭
    this._hideSliderTooltip = () => {
      _this.$refs.slider?.$refs?.button1?.$refs?.tooltip?.hide();
    };
    document.body.addEventListener("touchend", this._hideSliderTooltip);
    document.body.addEventListener("mouseup", this._hideSliderTooltip);
    //路由切换处理
    EventBus.$on("globalRouterAfterEach", this.routerChangeHandler);
  },
  beforeDestroy() {
    this.$emit("resize", "0px");
    this.resizeObserver && this.resizeObserver.disconnect();
    this.closeVisibleInterval();
    this.mapRef.removeInteraction(draw);
    draw = null;
    this.mapRef = null;
    this.globalMap = null;
    document.body.removeEventListener("touchend", this._hideSliderTooltip);
    document.body.removeEventListener("mouseup", this._hideSliderTooltip);
  },
  directives: {
    // 指令的定义
    "drag-width": {
      // 指令的定义
      bind: function (el, binding, vNode) {
        const _this = vNode.context;
        /* 拖动 */
        el.onmousedown = (e) => {
          let _mapDrag = $("#mapForDrag" + _this.mapIndex);
          _this.flag = false;
          e.stopPropagation();
          const pw = _mapDrag.parent().outerWidth();
          const ow = _mapDrag.outerWidth();
          document.onmousemove = (mousemoveEvent) => {
            const wp = ((ow + e.clientX - mousemoveEvent.clientX) / pw) * 100;
            _mapDrag.css({
              width: wp + "%",
              height: wp + "%",
            });
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
            _this.flag = true;
          };
        };
      },
    },
  },
  methods: {
    /**
     * 鼠标移动
     */
    mousemove(e) {
      const scale = Number(this.scale) || 1;
      const { x, y } = e;
      const { left, top } = $(this.$el).offset();
      this.mouse.x = (x - left) / scale;
      this.mouse.y = (y - top) / scale;
    },
    /**
     * 看这里
     */
    doLookHere() {
      this.lookHere = !this.lookHere;
      if (this.lookHere) {
        //打开看这里功能
        if (this.lookHereLayer) {
          //看这里图层已存在
          this.lookHereLayer.setVisible(true); //显示看这里图层
          return false;
        }
        this.lookHereLayer = new CTMapOl.extend.LookAtHere(
          this.mapRef,
          new CTMapOl.style.Style({
            //创建看这里图层
            image: new CTMapOl.style.Icon({
              src: position,
              width: 32,
              height: 32,
              anchor: [0.49, 0.92],
            }),
            zIndex: 99,
          }),
          (feature) => {
            const point = CTMapOl.extend.formatLayer.transCoordinate(
              feature,
              "EPSG:3857",
              "EPSG:4326"
            ); //投影转坐标
            this.toLookHere(point);
          }
        );
      } else {
        //关闭看这里功能
        this.lookHereLayer?.pointSource.clear(); //清除打点
        this.lookHereLayer?.setVisible(false); //隐藏看这里图层
      }
    },
    /**
     * 转到看这里打点
     */
    toLookHere(point) {
      const params = {
        deviceCode: this.deviceCode,
        channelCode: this.channelCode,
        cameraLon: Number(this.longitude),
        cameraLat: Number(this.latitude),
        pointLon: point[0],
        pointLat: point[1],
        tenantId: this.isTenant,
        userId: this.userId,
      };
      turnToPtzByPointAngle(params).then((resp) => {
        if (resp.code === 200) {
          this.getDeviceVisibleBySite();
        } else {
          $message.a(resp);
        }
      });
    },
    async queryDeviceData() {
      try {
        let params = {
          deviceCode: this.deviceCode,
        };
        let res = await queryDeviceForWE(params);
        if (res.code === 200) {
          this.getDeivceIcon(res.data);
          console.log("设备信息", res.data);
        }
      } catch (err) {
        console.log(error);
      }
      this.initmap();
    },
    /**
     * 初始化地图
     */
    initmap() {
      console.log("initmap");
      this.mapId = `mapForVideoBox${this.mapIndex}`;
      let { map, mapMap } = initCTMap(this.mapId);
      this.globalMap = mapMap;
      this.mapRef = map;
      this.getDeviceVisibleBySite(() => {
        setZoomAndCenter(this.mapRef, this.longitude, this.latitude, 11);
      });
      this.openVisibleInterval();
      this.queryHornByRange();
    },
    /**
     * 初始化可视域
     * @param targetVal
     * @param successFn
     */
    initShedLayer(targetVal, successFn) {
      showMarkCluster(
        this.mapRef,
        {
          list: [
            {
              id: this.deviceCode,
              longitude: this.longitude,
              latitude: this.latitude,
              distance: 0, // 半径，单位 米
              heading: 0, // 朝向，顺时针旋转
              angle: targetVal.horizRange || (this.isArCamera ? 180.01 : 50.01), // 角度范围
              isWarning: false, // 是否报警状态
              iconSize: [30, 30],
              icon: this.deviceIcon,
              clickIcon: this.deviceIcon,
              offset: [15, 15],
            },
          ],
          clusterImgItem: {
            viewDistanceColor: this.viewDistanceColor,
            viewAngleColor: this.viewAngleColor,
            keepPartialViewShed: true,
          },
        },
        null,
        null,
        (LayeredClusterViewShed) => {
          this.LayeredClusterViewShed = LayeredClusterViewShed;
          this.LayeredClusterViewShed.zoomToViewShed("id", this.deviceCode);
          this.clusterSetViewshed(targetVal);
          if (successFn) {
            successFn();
          }
        }
      );
    },
    /**
     * 轮询获取点位可视域
     */
    getDeviceVisibleBySite(successFn) {
      getDeviceVisibleBySite({ deviceCodes: [this.deviceCode] }).then((res) => {
        if (res.code === 200 && res.data.length > 0) {
          let targetVal = res.data[0];
          if (this.LayeredClusterViewShed) {
            this.clusterSetViewshed(targetVal);
          } else {
            this.initShedLayer(targetVal, successFn);
          }
        }
        //处理摄像机无可视域情况，直接打点
        if (res.code === 200 && res.data.length === 0) {
          if (this.showClusterFlag) {
            return false;
          }
          showMarkCluster(
            this.mapRef,
            {
              list: [
                {
                  id: this.deviceCode,
                  longitude: this.longitude,
                  latitude: this.latitude,
                  distance: 0, // 半径，单位 米
                  heading: 0, // 朝向，顺时针旋转
                  // angle: targetVal.horizRange || (this.isArCamera ? 180.01 : 50.01), // 角度范围
                  isWarning: false, // 是否报警状态
                  iconSize: [30, 30],
                  icon: this.deviceIcon,
                  clickIcon: this.deviceIcon,
                  offset: [15, 15],
                },
              ],
              clusterImgItem: {
                viewDistanceColor: this.viewDistanceColor,
                viewAngleColor: this.viewAngleColor,
                keepPartialViewShed: true,
              },
            },
            null,
            null,
            (LayeredClusterViewShed) => {
              this.showClusterFlag = true;
              this.LayeredClusterViewShed = LayeredClusterViewShed;
              if (successFn) {
                successFn();
              }
            }
          );
        }
      });
    },
    /**
     * 设置可视域的值
     * @param targetVal
     */
    clusterSetViewshed(targetVal) {
      clusterSetViewshed(this.LayeredClusterViewShed, {
        idKey: "id",
        idValue: this.deviceCode,
        guid: this.deviceCode,
        longitude: this.longitude,
        latitude: this.latitude,
        distance: Number(targetVal?.visualRange || 3) * 1000,
        heading: Number(targetVal?.horizViewRange || "157.79"),
        angle: targetVal.horizRange || (this.isArCamera ? 180.01 : 50.01),
        ishalf: this.isArCamera ? 1 : 0,
        viewDistanceColor: this.viewDistanceColor,
        viewAngleColor: this.viewAngleColor,
      });
    },
    /**
     * 开启可视域轮训
     */
    openVisibleInterval() {
      this.closeVisibleInterval();
      visibleInterval = setInterval(() => {
        this.getDeviceVisibleBySite();
      }, 5000);
    },
    /**
     * 关闭可视域轮训
     */
    closeVisibleInterval() {
      clearInterval(visibleInterval);
      visibleInterval = null;
    },
    /**
     * 可视域开关
     * @param value
     */
    openViewShedChange(value) {
      this.isOpenViewshed = value;
      if (this.isOpenViewshed) {
        this.openVisibleInterval();
        this.LayeredClusterViewShed.setViewShedVisible(true);
      } else {
        this.closeVisibleInterval();
        this.LayeredClusterViewShed.setViewShedVisible(false);
      }
    },
    locateToCamera() {
      console.log("定位到摄像机", this.longitude, this.latitude);
      setZoomAndCenter(this.mapRef, this.longitude, this.latitude, 11);
    },
    /**
     * 获取设备图标
     * @param deviceItem
     */
    getDeivceIcon(deviceItem) {
      let arFlag = false; //是否显示ar设备
      let onlineFlag = false; //是否在线
      let offLineHasAr = false; //离线里有ar
      if (deviceItem.status === "0" || deviceItem.allLine === "0") {
        onlineFlag = true;
        if (String(deviceItem.categoryCode) === "2") {
          // 在线的ar设备
          arFlag = true;
        }
      } else {
        if (String(deviceItem.categoryCode) === "2") {
          // 在线的ar设备
          offLineHasAr = true;
        }
      }
      if (!onlineFlag && offLineHasAr) {
        //离线且离线的有ar设备
        arFlag = true;
      }
      this.isArCamera = arFlag;
      let icon = null;
      if (arFlag) {
        if (onlineFlag) {
          //ar在线
          icon = this.industryType.includes("g") ? arOnline_g : arOnline;
        } else {
          //ar离线
          icon = this.industryType.includes("g") ? arOffline_g : arOffline;
        }
      } else {
        if (onlineFlag) {
          //普通在线
          icon = this.industryType.includes("g") ? ipcOnline_g : ipcOnline;
        } else {
          //普通离线
          icon = this.industryType.includes("g") ? ipcOffline_g : ipcOffline;
        }
      }
      this.deviceIcon = icon;
    },
    /**
     * 显示消息
     * @param text
     */
    doMessTs(text) {
      if (text) {
        this.$refs["ts"].doMessTs(text, true);
      }
    },
    /**
     * 格式化距离提示文字
     */
    formatTooltip(val) {
      return val + "km";
    },
    /**
     * 距离改变触发
     */
    distanceChange(val) {
      this.distance = Number(val);
      this.queryHornByRange();
    },
    /**
     * 查询所选范围内大喇叭
     */
    queryHornByRange() {
      const param = {
        longitude: this.longitude,
        latitude: this.latitude,
        radius: this.distance * 1000,
      };
      queryHornByRange(param).then((resp) => {
        const _this = this;
        const data = resp.data;
        this.hornList = resp.data;
        //处理显示图片和点击显示的图片
        for (const respElement of data) {
          const flag = String(respElement.deviceStatus) === "0"; //是否在线
          respElement.icon = flag ? hornOnline : hornOffline;
          respElement.clickIcon = hornClick;
        }
        //显示数据
        this.showMassMark(
          "video-map-horn",
          data,
          {
            longitudeAttr: "longitude",
            latitudeAttr: "latitude",
            idAttr: "deviceCode",
            iconAttr: "icon",
            clickIconAttr: "clickIcon",
          },
          {
            pointImgWidth: 30,
            pointImgHeight: 30,
            iconOffset: [15, 15],
            clickFn: (_id) => {
              for (const item of this.hornList) {
                if (item.deviceCode === _id) {
                  _this.showRealTimeShout(item);
                }
              }
            },
          },
          {
            clusterImg: clusterBlue,
            clusterImgWidth: 56,
            clusterImgHeight: 56,
            clusterOffset: [28, 28],
            viewDistanceColor: "rgba(58, 160, 255, 0.3)",
            viewAngleColor: "rgba(58, 160, 255, 0.7)",
          },
          null
        );
      });
    },
    /**
     * 显示海量点
     * @param layerId
     * @param dataList dataList 格式 [[lng,lat,id],[lng,lat,id]]
     * @param attrObj
     * @param iconObj
     * @param clusterImgItem {clusterImg,clusterImgWidth,clusterImgHeight,clusterOffset}
     * @param successFn
     */
    showMassMark(
      layerId,
      dataList,
      attrObj,
      iconObj,
      clusterImgItem,
      successFn
    ) {
      let mapInstance = this.globalMap;
      let map = this.mapRef;
      //格式化数据
      const formatList = this.formatClusterList(dataList, attrObj, iconObj);

      if (this.cluster == null) {
        //需要实例化
        showMarkCluster(
          map,
          {
            list: formatList,
            clickFn: iconObj.clickFn,
            clusterImgItem: clusterImgItem,
            clusterMaxZoom: 1,
          },
          null,
          null,
          (cluster) => {
            this.cluster = cluster;
            cluster.disableCluster(true);
            this.hornMass = cluster;
            CommonMap.executeFunction(successFn, cluster);
          }
        );
      } else {
        //已经实例化过, 改变数据
        setClusterLayerData(this.cluster, formatList);
      }
    },
    /**
     * 格式化点数据
     * @param list
     * @param attrObj
     * @param iconObj
     * @returns {*[]}
     */
    formatClusterList(list, attrObj, iconObj) {
      const { longitudeAttr, latitudeAttr, idAttr } = attrObj;
      const { imgPath, pointImgWidth, pointImgHeight, iconOffset } = iconObj;
      let returnList = [];
      for (const item of list) {
        const longitude = item[longitudeAttr];
        const latitude = item[latitudeAttr];
        const id = item[idAttr];
        let idStr = id;
        if (!(longitude && latitude && id)) {
          continue;
        }

        const icon =
          attrObj.iconAttr != null
            ? item[attrObj.iconAttr] || imgPath
            : imgPath;
        const clickIcon =
          attrObj.clickIconAttr != null ? item[attrObj.clickIconAttr] : icon;
        let param = {
          id: idStr,
          longitude: Number(longitude),
          latitude: Number(latitude),
          iconSize: [pointImgWidth, pointImgHeight],
          icon: icon,
          clickIcon: clickIcon,
          offset: iconOffset,
          arFlag: item.arFlag,
          onlineFlag: item.onlineFlag,
        };
        returnList.push(param);
      }
      return returnList;
    },
    /**
     * 打开实时喊话
     * @param data
     */
    showRealTimeShout(data) {
      const _this = this;
      if (this.isShowRealTimeShout) {
        this.$set(data, "showShout", false);
        if (this.currentSelectRealTimeShout === data.deviceName) {
          this.$refs.realTimeShout.close();
          this.currentSelectRealTimeShout = "";
          this.detailsDataShout = {};
        } else {
          if (this.currentSelectRealTimeShout) {
            this.$message.error(
              this.currentSelectRealTimeShout +
                "设备正在喊话中，请先结束当前喊话"
            );
          } else {
            this.$refs.realTimeShout.close();
            this.currentSelectRealTimeShout = "";
            this.detailsDataShout = {};
          }
        }
      } else {
        this.$set(data, "showShout", true);
        this.detailsDataShout = data;
        this.isShowRealTimeShout = true;
        this.currentSelectRealTimeShout = data.deviceName;
        setTimeout(() => {
          _this.$refs.realTimeShout.open();
        }, 500);
      }
    },
    /**
     * 关闭实时喊话
     */
    closeRealTimeShout() {
      this.isShowRealTimeShout = false;
      this.$set(this.detailsDataShout, "showShout", false);
      if (this.hornMass) {
        this.hornMass.deSelectCamera();
      }
    },
    /**
     * 路由切换处理
     */
    routerChangeHandler() {
      // 路由切换时关闭实时喊话
      this.closeRealTimeShout();
    },
  },
};
</script>

<style lang="scss" scoped>
.video-play {
  .play-item.playing:hover {
    .map-box-for-video {
      bottom: var(--player-toolbar-height) !important;
    }
  }
}
.start-look-here {
  cursor: none;
}
.look-here-mouse {
  font-size: 34px;
  color: #fff;
  text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
  line-height: 1;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 199;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.map-box-for-video {
  position: absolute;
  transition: bottom 0.3s;
  bottom: 0;
  right: 0;
  z-index: 13;
  width: 38%;
  height: 38%;
  max-width: 82%;
  max-height: 82%;
  min-width: 38%;
  min-height: 38%;
  -webkit-user-drag: none;

  .drag {
    width: 10px;
    height: 10px;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    pointer-events: auto;

    &:hover {
      cursor: se-resize;
    }
  }

  .map-content {
    width: 100%;
    height: 100%;
  }

  .l-btns {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    .btn {
      width: 30px;
      height: 30px;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      cursor: pointer;
      font-size: 18px;
      margin-top: 6px;
      &.on {
        background: #ffffff;
        color: #000000;
      }
    }
    &.small {
      left: 6px;
      bottom: 6px;
      .btn {
        width: 20px;
        height: 20px;
        font-size: 12px;
        margin-top: 6px;
      }
    }
    &.mini {
      left: 2px;
      bottom: 2px;
      .btn {
        width: 12px;
        height: 12px;
        font-size: 7px;
        margin-top: 2px;
      }
    }
  }

  .slider {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 147px;
    z-index: 2;

    /deep/ .el-slider__runway {
      height: 4px;
      margin: 8px 0 6px 0;
      background: #cde3ff;
      box-shadow: none;
      border-radius: 1px;

      .el-slider__bar {
        height: 4px;
        background: linear-gradient(270deg, #8ecaff 0%, #1373e6 100%);
        box-shadow: 0px 0px 5px 0px rgba(19, 115, 230, 0.7);
      }
    }

    .el-slider /deep/ .el-slider__button {
      width: 12px;
      height: 14px;
      border: none;
      background-image: url("~@/assets/image/video/icon_slider.png");
      background-repeat: no-repeat;
      border-radius: inherit;
      background-color: transparent;
    }

    .slider-text {
      color: #fff;
      display: flex;
      justify-content: space-between;
    }
  }

  .customizedSlider {
    /deep/ .el-slider__button {
      border: none !important;
      border-radius: 0;
      width: 12px;
      height: 14px;
      background: url("~@/assets/image/video/icon_slider.png") no-repeat
        center/100% auto transparent !important;
    }
  }

  .map-mask-bottom {
    position: absolute;
    width: 100%;
    height: 77px;
    background: linear-gradient(
      180deg,
      rgba(19, 34, 51, 0) 0%,
      rgba(8, 15, 23, 0.85) 100%
    );
    bottom: 0;
    z-index: 1;
    pointer-events: none;
  }
}

.ts {
  margin-top: 22px;
}
</style>
<style lang="scss">
.el-tooltip__popper.slider_tip_video_map {
  background: #1373e6 !important;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 4px;
  min-width: 50px;
  text-align: center;
  white-space: nowrap;

  .popper__arrow,
  .popper__arrow:after {
    border-top-color: #1373e6 !important;
  }
}
</style>
